<template>
  <!-- 这是购物车商品的页面 -->
  <div class="star">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      highlight-selection-row="true"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="ID" prop="ID"> </el-table-column>
      <el-table-column label="图书名称" prop="bookname"> </el-table-column>
      <el-table-column label="图片" width="80">
        <template >
          <!-- {{scope.row.url}} -->
          <img
            src="https://img3m5.ddimg.cn/77/11/29833925-1_w_1748496288.jpg"
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="简介" prop="intro"> </el-table-column>
      <el-table-column label="作者" prop="writer"> </el-table-column>
      <el-table-column label="出版社" prop="press"> </el-table-column>
      <el-table-column label="价格" prop="price"> </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="buyMore(scope.$index, scope.row)"
            >去结算</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="elbutton">
        <el-button type="danger" plain size="small" @click="deleteMore"
          >批量删除</el-button
        >
        <el-button type="success" plain size="small" @click="buyMore"
          >批量结算</el-button
        >
      </div>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [],
      search: "",
      radio: "",
      number: "4",
      name: "",
      id: "",
      url: "",
      descs: "",
      price: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      userInfo: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      multipleSelection: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 删除按钮
    handleDelete(index, row) {
      console.log(index);
      console.log(row);

      this.$confirm("小主！您的操作将永久删除该收藏, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.request.delete("/sc/" + row.id).then((res) => {
            if (res.data.code === "200") {
              this.$message.success("已听从您的指示！为您净化空间啦！");
              this.load();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "还好还好！可以挽回！已为您取消删除该订单",
          });
        });
    },

    // 批量删除
    deleteMore() {
      console.log(this.multipleSelection);
      let ids = this.multipleSelection.map((v) => v.id);
      console.log(ids);

      this.$confirm(
        "小主！您的操作将在您的收藏里批量删除这些图书, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          this.request.post("/sc/del/batch", ids).then((res) => {
            if (res.data.code === "200") {
              this.$message.success("已听从您的指示！为您净化空间啦！");
              this.load();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "还好还好！可以挽回！已为您取消删除这些图书！",
          });
        });
    },

    // 批量删除
    buyMore() {
      console.log(this.multipleSelection);
      let ids = this.multipleSelection.map((v) => v.id);
      console.log(ids);

      this.$confirm("小主！您的操作将在进行结算, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push('/checkstand')
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 页面初始化
    load() {
      this.tableData = [
        {
          ID: "1",
          bookname: "毕业",
          writer: "ju",
          press: "上海",
          intro: "sfdjakshd",
        },
      ];
      console.log("tableData=====", this.tableData);

      // this.request.get("/sc/page",{
      //   params:{
      //     pageNum:this.pageNum,
      //     pageSize:this.pageSize,
      //     name:this.name,
      //     uid:this.userInfo.data.id
      //   }
      // }).then(res =>{
      //   console.log(res)
      //   this.tableData = res.data.data.records
      //   this.total = res.data.data.total
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    console.log(this.userInfo);
    this.load();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.star {
  .compute {
    float: right;
    display: flex;
    // margin-bottom: 5%;
    // position: fixed; 是相对于浏览器窗口固定的。即使窗口滚动。他也不会移动
    position: fixed;
    top: 650px;
    right: 45px;

    .heji {
      // float: right;
      margin: 13px 50px;
      text-align: center;
      .price {
        color: red;
        font-size: 20px;
      }
    }
    .jiesuan {
      margin: 10px;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .elbutton {
      padding-top: 15px;
    }
    .block {
      float: right;
      margin-top: 15px;
    }
  }
}
</style>
